


Screenplay Skin

by astronought



Category: Original Work
Genre: Screenplay/Script Format, Work Skin
Language: English
Status: Completed
Published: 2019-02-05
Updated: 2019-02-05
Packaged: 2019-10-22 13:25:10
Rating: General Audiences
Warnings: Creator Chose Not To Use Archive Warnings
Chapters: 2
Words: 1,705
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/17663495
Author URL: https://archiveofourown.org/users/astronought/pseuds/astronought
Summary: A work skin created for fics designed to emulate a screenplay. This is by someone who has no experience in screenwriting or coding...so take that as you will.





	1. Chapter 1

**Author's Note:**

> BACKSTORY: SO I was alternating between playing the Spider-Man PS4 game and watching Teen Wolf (as one does) and I was like “What if spider-man was rebooted as a mediocre teen drama? That’s something I would die for tbh...” so I wrote an episode. And then I wrote a work skin. But because I never finish anything and will probably never post the screenplay fic I wrote it for, I figured I could post the skin just in case anyone who is capable of finishing things or actually knows how to write at all wants to use it.
> 
> Chapter 1 is an example (using an excerpt of the never-to-be finished fic, haha) and Chapter 2 is explaining how to use the skin. It’s meant for desktop, so it’s a little jank on mobile, but it’s still, like, readable on my phone.

 

FADE IN

OSBORN PENTHOUSE - NIGHT

Dim green light through a large window. Beyond it, the city, occasionally lit up by a FLASH OF LIGHTNING.

The silhouette of HARRY OSBORN, 17, stands with his back to the camera. BRING UP the voice of a MAN, distorted as if through tinny speakers.

MAN (V.O.)

...got a caller on the line, from Queens, New York. You’re on with J. Jonah Jameson.

This is J. JONAH JAMESON: mid 50s, editor at the Daily Bugle, and, most recently, host of the Bugle’s brand new podcast, “Just the Facts”.

CALLER (V.O.)

I just want to say, I think you’re wrong about Spider-Man. The way I see it, the mask proves the guy’s not in it for himself.

CUT TO:

Harry’s hands, white-knuckled as they clench his MUG of tea.

CALLER (V.O.)

I mean, look at the guys up in the Baxter Building. If he’d show his face, Spidey could be livin’ it up, just like them.

TILT to Harry in profile, following his mug as he takes a sip from it. From this angle, we can see the bags under his eyes. He doesn’t just look tired. He looks unwell.

JAMESON (V.O.)

Listen to this, folks! This clown thinks that the Spider-Man wears the mask ‘cause he’s SELFLESS! Well, I hate to break the news to you, caller, but you’re wrong. WRONG! All that mask allows that no-good vigilante to do is run around willy-nilly without having to face the CONSEQUENCES of his ACTIONS! Just look at the debacle with the Shocker yesterday-

The podcast cuts off as Harry removes his earbuds. Now we can hear the muted sound of POURING RAIN. A moment, then a CRACK OF THUNDER.

CUT TO **BLACK**


	2. Chapter 2

**Summary for the Chapter:**

> OK, now for the useful part :)

The first thing you're gonna want to do is head to your dashboard, click on "skins", then "my work skins". Then go ahead and smash that ~~like~~ "create work skin" button.

Once you've opened up the "create new skin" page, paste this text into the box titled "CSS":

>   
>  #workskin CSS Website Layout * {  
>  box-sizing: border-box;  
>  background-color: OldLace;  
>  } 
> 
> #workskin p.act {  
>  font-weight: normal;  
>  font-family: "Courier New", courier, monospace;  
>  font-size: 18px;  
>  margin: 10px 6.66% 10px 10%;  
>  max-width: 700px;  
>  background-color: white;  
>  } 
> 
> #workskin p.slug {  
>  font-weight: normal;  
>  font-family: "Courier New", courier, monospace;  
>  font-size: 18px;  
>  text-transform: uppercase;  
>  text-decoration: underline;  
>  margin: 0px 6.66% 25px 10%;  
>  background-color: white;  
>  max-width: 700px;  
>  } 
> 
> #workskin p.sub {  
>  font-weight: normal;  
>  font-family: "Courier New", courier, monospace;  
>  font-size: 18px;  
>  text-transform: uppercase;  
>  margin: 0px 6.66% 25px 10%;  
>  background-color: white;  
>  max-width: 700px;  
>  } 
> 
> #workskin p.char {  
>  font-weight: normal;  
>  font-family: "Courier New", courier, monospace;  
>  font-size: 18px;  
>  text-align: center;  
>  text-transform: uppercase;  
>  margin: 35px 26.25% 5px 35%;  
>  max-width: 700px;  
>  background-color: white;  
>  } 
> 
> #workskin .dlogue {  
>  text-align: left;  
>  font-family: "Courier New", courier, monospace;  
>  font-size: 18px;  
>  margin: 5px 20% 40px 30%;  
>  max-width: 400px;  
>  background-color: white;  
>  } 
> 
> #workskin p.trns {  
>  text-align: right;  
>  font-weight: bold;  
>  font-family: "Courier New", courier, monospace;  
>  font-size: 18px;  
>  text-transform: uppercase;  
>  margin: 10px 6.66% 10px 10%;  
>  max-width: 700px;  
>  background-color: white;  
>  } 
> 
> #workskin p.fadein {  
>  font-weight: bold;  
>  font-family: "Courier New", courier, monospace;  
>  font-size: 18px;  
>  text-transform: uppercase;  
>  margin: 10px 6.66% 0px 10%;  
>  background-color: white;  
>  } 
> 
> #workskin p.cuttoblack {  
>  text-align: right;  
>  font-family: "Courier New", courier, monospace;  
>  font-size: 18px;  
>  text-transform: uppercase;  
>  margin: 10px 6.66% 10px 10%;  
>  max-width: 700px;  
>  background-color: white;  
>  } 
> 
> #workskin p.par {  
>  text-indent: 7.5%;  
>  text-align: left;  
>  font-family: "Courier New", courier, monospace;  
>  font-size: 18px;  
>  margin: 5px 20% 0px 30%;  
>  max-width: 400px;  
>  background-color: white;  
>  } 
> 
> #workskin p.midpar {  
>  text-indent: 7.5%;  
>  text-align: left;  
>  font-family: "Courier New", courier, monospace;  
>  font-size: 18px;  
>  margin: -30px 20% 0px 30%;  
>  max-width: 400px;  
>  background-color: white;  
>  } 
> 
> #workskin body {  
>  margin: 0;  
>  } 
> 
> #workskin .column {  
>  float: center;  
>  padding: 20px 10px 20px 10px;  
>  } 
> 
> #workskin .column.side {  
>  width: 27.5%;  
>  padding: 0 10% 0 10%;  
>  } 
> 
> #workskin .column.middle {  
>  width: 45%;  
>  max-width: 800px;  
>  border: 1px solid LightGray;  
>  background-color: white;  
>  padding: 0 5% 0 5%;  
>  } 
> 
> #workskin .row:after {  
>  content: " ";  
>  display: table;  
>  clear: both;  
>  } 
> 
> #workskin .column.side,  
>  #workskin .column.middle {  
>  width: 100%;  
>  }  
> 

Then give it a name and click submit.

After that, you'll want to open up your fic or create a new one. After you've filled in all the tags, archive warnings, etc., select the work skin from the dropdown menu in the "associations" tab.

Then, MAKING SURE YOU'RE USING PLAIN TEXT w/ HTML, paste this text (your "header") *BEFORE* everything you want to be in the script style in the "Work Text" box:

> <p></p><div class="row">
> 
> <p></p><div class="column side"><h2></h2></div><div class="column middle">
> 
>  

And THIS text (your "footer") *AFTER* everything you want to be in the script style in the "Work Text" box:

> </p></div><div class="column side"><h2></h2></div></div>
> 
>  

Then, you're going to have to classify all your text. The basic formatting for doing so goes like this:

> <p class="[INSERT CLASSIFICATION]"> [INSERT TEXT] </p>
> 
>  

An example:

<p class="act"> Harry yeets his AIRPODS across the room.</p>

You would put the code for the type of text it is (e.g. "act" for an action line) in the first set of brackets and your text (e.g."HARRY yeets his AIRPODS across the room.") in the second set of brackets. If PLACED BETWEEN the header and footer, this line will result in the following:

## 

HARRY yeets his AIRPODS across the room. 

## 

I've listed the codes below for each classification. I've also included their basic uses, if you're not sure what to put for each type of text or you're unfamiliar with the terms.

> **"fadein"** \- for FADE IN. Normally, these should be the first two words in your script.
> 
> **"slug"** \- for SCENE HEADINGS. A one line description of the location and time of day of a scene, usually formatted as "INT. [LOCATION] - [TIME]" or "EXT. [LOCATION] - [TIME]" depending on whether the scene is inside (int.) or outside (ext.)
> 
> **"sub"** \- for SUBHEADINGS. Used for when a full scene heading isn't really necessary, like if Spider-Man SWINGS AWAY or something. I use them for random things I want to give more emphasis to and ending montages also but you're not really supposed to.
> 
> **"act"** \- for ACTIONS, i.e. narrative description of scenes. Within these, always write the introduction of characters as well as camera actions (such as tilt, pan, zoom) in all caps. You can also write key objects and character actions in all caps at your discretion here. Sorry, you have to do the capitalization yourself here :(
> 
> **"trns"** \- for TRANSITIONS, i.e. film editing instructions such as cut, smash, match. Usually formatted as "[TRANSITION] TO:"
> 
> **"char"** \- for CHARACTERS. Use this with the name of the person who will be speaking right before the line.
> 
> **"dlogue"** \- for DIALOGUE, i.e. a character's lines. Yes, I realize I should have abbreviated it dlog but I'm dumb,,,
> 
> **"par"** \- for PARENTHETICALS that occur at the *BEGINNING* of a character's dialogue. Use these to indicate how the actor would deliver this line, or an action that they would take, such as (choked sobbing) (he pauses) or (rolling her eyes). Feel free to get creative!
> 
> **"midpar"** \- for PARENTHETICALS that occur in the *MIDDLE* of a character's dialogue. These are EXACTLY the same as "par" EXCEPT for the margins: these have a -30 px top margin so they don't create a weird gap in the dialogue.
> 
> **"cuttoblack"** \- Imma keep it real w u chief, this ain't it. And by it I mean legit. I just use it whenever I cut to black or white because I think it looks sexy like that :/. If you want to do what I do paste your text in the line of code like usual but put <strong>black</strong> or <strong>white</strong> instead of just "black" or "white".

So once you put it all together, your "Work Text" box should look something like this:

 

<p></p><div class="row">

<p></p><div class="column side"><h2></h2></div><div class="column middle">

<p class="fadein">fade in</p>

<p class="slug">Osborn penthouse - night</p>

<p class="act">Dim green light through a large window. Beyond it, the city, occasionally lit up by a FLASH OF LIGHTNING.</p>

<p class="act">The silhouette of HARRY OSBORN, 17, stands with his back to the camera. BRING UP the voice of a MAN, distorted as if through tinny speakers.</p>

<p class="char">Man (V.O.)</p>

<p class="dlogue">...got a caller on the line, from Queens, New York. You’re on with J. Jonah Jameson.</p>

<p class="act">This is J. JONAH JAMESON: mid 50s, editor at the Daily Bugle, and, most recently, host of the Bugle’s brand new podcast, “Just the Facts”.</p>

<p class="char">Caller (V.O.)</p>

<p class="dlogue">I just want to say, I think you’re wrong about Spider-Man. The way I see it, the mask proves the guy’s not in it for himself.</p>

<p class="trns">Cut to:</p>

<p class="act">Harry’s hands, white-knuckled as they clench his MUG of tea.</p>

<p class="char">Caller (V.O.)</p>

<p class="dlogue">I mean, look at the guys up in the Baxter Building. If he’d show his face, Spidey could be livin’ it up, just like them.</p>

<p class="act">TILT to Harry in profile, following his mug as he takes a sip from it. From this angle, we can see the bags under his eyes. He doesn’t just look tired. He looks unwell.</p>

<p class="char">Jameson (V.O.)</p>

<p class="dlogue">Listen to this, folks! This clown thinks that the Spider-Man wears the mask ‘cause he’s SELFLESS! Well, I hate to break the news to you, caller, but you’re wrong. WRONG! All that mask allows that no-good vigilante to do is run around willy-nilly without having to face the CONSEQUENCES of his ACTIONS! Just look at the debacle with the Shocker yesterday-</p>

<p class="act">The podcast cuts off as Harry removes his earbuds. Now we can hear the muted sound of POURING RAIN. A moment, then a CRACK OF THUNDER.</p>

<p class="cuttoblack">cut to <strong>black</strong></p>

</p></div><div class="column side"><h2></h2></div></div>

## 

If it does, nice job! You're ready to hit "preview". Or "post without preview", if you're wild like that. If you're having trouble, feel free to drop me a message! I hope this tutorial helped you :)


End file.
